<template>
  <div class="container">
    <div class="mainWrapper">
        <el-form :inline="true" :model="formInline" class="formInline">
            <el-row>
                <el-col :span="18">
                    <div>
                        <el-form-item label="时间范围:" class="sjfw">
                            <el-date-picker size="mini" type="date" v-model="formInline.qsrq" :picker-options="pickerStartDate" value-format="yyyy-MM-dd"></el-date-picker>
                            <span>至</span>
                            <el-date-picker size="mini" type="date" v-model="formInline.zzrq" :picker-options="pickerEndDate" value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="责任部门:">
                            <el-row>
                                <el-col :span="16">
                                    <el-input size="mini" v-model="zrbmmc" disabled></el-input>
                                </el-col>
                                <el-col :span="8" class="selectZrbm">
                                    <el-button size="mini" type="primary" @click="selectZrbm">选择</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="事件序号:">
                            <el-input size="mini" v-model="formInline.sjxh"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="停电性质:">
                            <el-select size="mini" v-model="formInline.tdxzm[0]" placeholder="请选择">
                                <el-option v-for="item in tdxzOptions" :key="item.value" :label="item.text" :value="item.value">
                                <span class="txt">{{ item.text }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox v-model="checked" @change="changeKysj">只显示垮月事件</el-checkbox>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
                            <el-button size="mini" type="primary" @click="handleReset">重置</el-button>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="6" class="btn">
                    <el-button size="mini" type="primary" @click="handleAdd">新增</el-button>
                    <el-button size="mini" type="primary" @click="cccEvent('show', yxzyTdsjColumnTable)">列配置</el-button>
                    <el-button size="mini" type="primary" @click="cccEvent('export', yxzyTdsjColumnTable)">导出</el-button>
                </el-col>
            </el-row>
        </el-form>

        <div class="table">
            <el-table :data="tableData" ref="tableData" border style="width: 100%;" height="100%" v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    fixed="left"
                    align="center"
                    width="55">
                </el-table-column>
                <template v-for="col in yxzyTdsjColumnData">
                    <el-table-column
                        :show-overflow-tooltip="true"
                        :key="col.id"
                        :prop="col.field"
                        :label="col.title"
                        :min-width="col.minWidth"
                        :align="col.align"
                        :header-align="col.align"
                        :sortable="col.sortable"
                        :formatter="col.formatter"
                        :fixed="col.fixed"
                    ></el-table-column>
                </template>
                <el-table-column align="center" fixed="right" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="formInline.current" :page-size="formInline.size" :page-sizes="[10, 20, 40, 80]" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 选择责任部门编码 -->
        <GetDwbm :treeObj="treeObj" ref="getDwbmRef" @handleGetDwbm="handleGetDwbm"></GetDwbm>

        <!-- 中压停电事件新增 -->
        <yxzySjAdd :propAddData="propAddData" @updateYxzySjTable="updateYxzySjTable"></yxzySjAdd>

        <!-- 列配置 -->
        <ccc ref="ccc"></ccc>	
    </div>
  </div>
</template>

<script>
import { dataModulePrefix } from '../../../config';
import { getYxzySjListPage, deleteYxzySj } from '@/api/sjwh/yxzysj.js';
import { getTdxzbmCombo } from '@/api/dmgl/tdxz.js';
import GetDwbm from "@/dialogCommom/GetDwbm";
import yxzySjAdd from './modules/yxzySjAdd.vue';
import ccc from "@/dialogCommom/ccc";
export default {
    data() {
        return {
            formInline: {
                qsrq: '', // 起始日期
                zzrq: '', // 终止日期
                zrbm: [], // 责任部门编码数组
                tdxzm: [], // 停电性质编码数组
                dwbm: [], // 单位编码数组
                sjxh: '', // 事件序号
                kysj: '', // 跨月事件
                size: 10, // 每页数据条数
                current: 1 // 当前页码
            },
            zrbmmc: '', // 选中的责任部门名称
            tdxzm: '', // 选中的停电性质
            checked: false, // 是否选中只显示垮月事件
            total: 0, // 停电事件总数据条数
            pickerStartDate: { // 起始日期选择
                disabledDate: time => {
                    if (this.formInline.zzrq) {
                        return (
                            time.getTime() + 3600 * 1000 * 24 > new Date(this.formInline.zzrq)
                        );
                    }
                }
            },
            pickerEndDate: { // 终止日期选择
                disabledDate: time => {
                    if (this.formInline.qsrq) {
                        return (
                            time.getTime() < new Date(this.formInline.qsrq)
                        );
                    }
                }
            },
            treeObj: { // 传给选择责任部门编码组件的值
                type: 'radio',
                dwbm: ''
            },
            tdxzOptions: [], // 停电性质下拉框数据
            tableData: [], // 列表数据
            yxzyTdsjColumnTable: 'yx_zytdsj', // 中压停电事件列配置参数
            yxzyTdsjColumnData: [], //中压停电事件表格列数据
            multipleSelection: [], // 选中的数据
            loading: false, // 加载动画
            propAddData: { // 传给【中压停电事件新增】组件的值
                show: false,
                zrbm: '',
                zrbmmc: ''
            }
        }
    },

    components: {
        GetDwbm,
        yxzySjAdd,
        ccc
    },

    beforeUpdate () { 
        //解决列配置引发的滚动条问题
        const that = this
        that.$nextTick(()=>{
            that.$refs.tableData.doLayout()
        }) 
    },

    mounted() {
        const that = this
        that.cccEvent("load", that.yxzyTdsjColumnTable)
        getTdxzbmCombo().then(res => {
            if (res.code == 0) {
                that.tdxzOptions = res.data
            } else {
                that.$message.error(res.message)
            }
        })
        that.formInline.qsrq = that.getCurrentMonthFirst()
        that.formInline.zzrq = that.getCurrentMonthLast()
        let treeNode = JSON.parse(sessionStorage.getItem('treeNode'))
        that.formInline.dwbm = [treeNode.dwbm]
        that.formInline.zrbm = [treeNode.dwbm]
        that.zrbmmc = treeNode.dwmc
        that.getList()
    },

    methods: {
        /* 搜索 */
        handleSearch() {
            const that = this
            that.getList()
        },

        /* 重置 */
        handleReset() {
            const that = this
            that.formInline = {
                qsrq: '',
                zzrq: '',
                zrbm: [],
                tdxzm: [],
                dwbm: [],
                sjxh: '',
                kysj: '',
                size: 10,
                current: 1
            }
            that.getList()
        },

        // 选择事件
        handleSelectionChange(val) {
            this.multipleSelection = val
        },

        /* 获取事件列表 */
        async getList() {
            const that = this
            that.loading = true
            let res = await getYxzySjListPage(that.formInline)
            if (res.code == 0) {
                that.tableData = res.data.records
                that.total = res.data.total
            } else {
                that.$message.error(res.message)
            }
            that.loading =  false
        },

        /* 更改每页数据条数 */
        handleSizeChange(val) {
            const that = this
            that.formInline.size = val
            that.getList()
        },

        /* 更改页码 */
        handleCurrentChange(val) {
            const that = this
            that.formInline.current = val
            that.getList()
        },

        /* 选择责任部门编码 */
        selectZrbm() {
            const that = this
            that.treeObj.dwbm = that.formInline.dwbm[0]
            that.$refs.getDwbmRef.openDwbm()
        },

        /* 责任部门编码组件回传 */
        handleGetDwbm(val) {
            const that = this
            that.zrbmmc = val.data.dwmc
            that.formInline.zrbm = [val.data.dwbm]
        },

        /* 只显示垮月事件 */
        changeKysj() {
            const that = this
            if (that.checked) {
                that.formInline.kysj = '1'
            } else {
                that.formInline.kysj = ''
            }
        },

        /* 新增 */
        handleAdd() {
            const that = this
            let propAddData = {
                show: true,
                zrbm: that.formInline.zrbm[0],
                zrbmmc: that.zrbmmc
            }
            that.propAddData = JSON.parse(JSON.stringify(propAddData))
        },

        /* 修改 */
        handleEdit(row) {

        },

        /* 删除 */
        handleDelete(row) {
            const that = this
            that.$confirm('此操作将永久删除该停电事件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let vo = {
                    czy: row.czy,
                    ids: [row.id]
                }
                deleteYxzySj(vo).then(res => {
                    if (res.code == 0 && res.data) {
                        that.$message.success('删除成功')
                        that.getList()
                    } else {
                        that.$message.error(res.message)
                    }
                })
            }).catch(() => {
                console.log('已取消删除')          
            })
        },

        /* 组件回调更新中压停电事件列表 */
        updateYxzySjTable() {
            this.getList()
        },

        /* 获取当前月份的第一天 */
        getCurrentMonthFirst(){
            let date = new Date()
            date.setDate(1)
            let month = parseInt(date.getMonth()+1)
            let day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return date.getFullYear() + '-' + month + '-' + day
        },

        /* 获取当前月份的最后一天 */
        getCurrentMonthLast(){
            let date = new Date();
            let currentMonth = date.getMonth()
            let nextMonth =++ currentMonth
            let nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
            let oneDay = 1000*60*60*24
            let lastTime = new Date(nextMonthFirstDay - oneDay)
            let month = parseInt(lastTime.getMonth()+1)
            let day = lastTime.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return date.getFullYear() + '-' + month + '-' + day
        },

        //列配置
        cccEvent(method, table) {
            if (method === "show") {
                this.$refs.ccc.show(table);
            } else if (method === "load") {
                new Promise((resolve, reject) => {
                    this.$nextTick(() => {
                        resolve(this.$refs.ccc.load(table));
                    });
                }).then(response => {
                    this.yxzyTdsjColumnData = response;
                });
            } else if (method === "export") {
                let vo = {
                    tableCode: table,
                    param: this.formInline,
                    url: `${dataModulePrefix}/yx-zytdsj/listByPage`,
                    method: "POST",
                    fileName: '中压停电事件',
                    total: this.total
                };
                this.$refs.ccc.exportExcel(vo);
            }
        }
    }
}

</script>
<style lang='scss' scoped>
.container {
  height: 100%;
}
.mainWrapper {
  width: 100%;
  height: 100%;
  padding: 5px 10px;
}
.formInline /deep/ .el-input {
    width: 130px;
}
.formInline /deep/ .el-form-item {
    margin-bottom: 0;
}
.formInline .sjfw /deep/ .el-input {
  width: 130px !important;
}
.selectZrbm {
  padding-left: 8px;
}
.selectZrbm /deep/ .el-button--primary {
  width: 100%;
}
.btn {
    line-height: 40px;
    margin-top: 40px;
    text-align: right;
}
.mainWrapper .table {
    height: calc(100% - 120px);
}
.pagination {
    padding-top: 6px;
    text-align: center;
}
</style>
